<?
layout("/inc/layout.html",{title:sysTitle}){
?>
<link rel="stylesheet" href="static/uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="static/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="static/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="static/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" src="static/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="static/utf8-jsp/third-party/video-js/video.js"></script>
<script type="text/javascript" src="static/My97DatePicker/WdatePicker.js"></script>
<div id="page-wrapper">
	<!--BEGIN TITLE & BREADCRUMB PAGE-->
	<div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
		<div class="page-header pull-left">
			<div class="page-title">个人资料</div>
		</div>

		<div class="clearfix"></div>
	</div>
	<!--END TITLE & BREADCRUMB PAGE-->
	<!--BEGIN CONTENT-->


	<div class="page-content">

		<div class="row" style="width:auto;">

			<div class="col-lg-12" style="margin-top:-10px;">
					<div class="panel ">
						<div class="panel-body pan" style="height:auto">
							<form action="#" class="form-horizontal">
							<div class="form-body pal">
								<div class="row" style="margin-top:-15px; margin-bottom: 10px;">
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">用户名
											<span class='require' id="yonghu">*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<input id="username" onchange="onPanduan(this.value);"
													type="text" class="form-control" value="" readonly="readonly"/>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">密码
											<span class='require' id="mima">*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<input id="password" type="password" class="form-control" placeholder="如果输入，密码会重置；不输入，密码不改变"/>
											</div>
										</div>
									</div>
								</div>
								<div class="row" style="margin-bottom: 10px;">
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">昵称
											<span class='require' id="yonghu">*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<input id="nickName" type="text" class="form-control" value="" />
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">手机号
											<span class='require' >*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<input id="telephone" type="text" class="form-control" />
											</div>
										</div>
									</div>
								</div>
								<div class="row" style="margin-bottom: 10px;">
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">真实姓名
											<span class='require' id="yonghu">*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<input id="realName" type="text" class="form-control" value="" readonly="readonly"/>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">邮箱
											<span class='require'>*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<input id="email" type="text" class="form-control" />
											</div>
										</div>
									</div>
								</div> 	
								<div class="row" style="margin-bottom: 10px;">
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">用户头像<span
										class='require'>*</span> </label>
										<div class="col-md-9">
											<div style="display:inline " id="cover"></div>
											<input type="button" class="btn btn-primary" style="width: 70px;height: 30px;padding: 0;background-color: #4cae4c;border-color: #4cae4c;" onclick="upImages()" value="上传头像"  />
											<textarea id="uploadImage" name="uploadImage" style="display: none;"></textarea>
											<input id="coverImg" type="hidden" class="form-control" value="" />
										</div>
									</div>
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">性别
										<span class='require'>*</span> </label>
										<div class="col-md-9">
											<div class="input-icon">
												<select id="gender" class="form-control">
													<option value="0">未知</option>
													<option value="1">女</option>
													<option value="2">男</option>
												</select>
											</div>
										</div>
									</div>
									
								</div> 
								<div class="row" style="margin-bottom: 10px;">
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">用户类型<span
										class='require'>*</span> </label>
										<div class="col-md-9">
											<select id="type" class="form-control" disabled="disabled">
												<option value="1">教师用户</option>
												<option value="0">后台用户</option>
											</select>
										</div>
									</div>
								</div>
								<div class="row" style="margin-bottom: 10px;">
								
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">个性签名</label>
										<div class="col-md-9">
											<textarea id="signature"  rows="3" cols="20" class="form-control" ></textarea> 
										</div>
									</div>
									<div class="col-lg-6">
										<label for="inputUsername" class="col-md-3 control-label">简介</label>
										<div class="col-md-9">
											<textarea id="description"  rows="3" cols="20" class="form-control" ></textarea> 
										</div>
									</div>
								</div>
								<div class="row">
										<div class="col-lg-12">
										<div class="col-md-6">
											<button type="button" style="float: right;"
												class="btn btn-primary btn-blue"
												onclick="save()">提&nbsp;交</button>
										</div>
									</div>
								</div>
							</div>
							</form>
								<input id="id" type="hidden" class="form-control" value="${id}"/>
						</div>
					</div>
			</div>
		</div>
	</div>


	<!--END CONTENT-->
</div>


<?} ?>
<script>
$(function() {
		_editor = UE.getEditor('uploadImage');
	    _editor.ready(function (){
	        //设置编辑器不可用(事实上不可以设置不可用...所以注释掉,以观后效)
	        _editor.setDisabled();
	        //隐藏编辑器,因为只使用上传功能
	        _editor.hide();
	        //侦听图片上传
	  	 	_editor.addListener('beforeInsertImage',function(t,arg){
	  	 			for(var i=0;i<arg.length;i++){
	  	 				var urlPath = arg[i].src;
	  	 				$("#coverImg").val(urlPath);
						$("#cover").html("<a href="+urlPath+" download='w3logo'><img src='"+urlPath+"' width='30' height='30' /></a>");
	  	 			}
	        });
	        //侦听文件上传
		   	 _editor.addListener('afterUpfile',function(t,arg){
		   	 	
		   	 });
	   });
	   init();
	});
	
	function save() {
	
		var username=$("#username").val(); //    
	    var re =/^[\w]{1,20}$/;
		if (!re.test(username)) {
			layer.msg('用户名:只允英文字母、数字及下划线,限制20个字符以内。');
			return null;
		}
	
		if ($.trim($("#username").val()).length < 1) {
			layer.msg('请输入用户名！');
			return null;
		}
		if($("#password").val().length!=0){
			if ($.trim($("#password").val()).length < 1) {
				layer.msg('请输入密码！');
				return null;
			}
			if($("#password").val().length<6 || $("#password").val().length>20){
				layer.msg('密码:6-20位之间');
				return null;
			}
			
		}
		
		if ($.trim($("#realName").val()).length < 1) {
			layer.msg('请输入真实姓名！');
			return null;
		}
		
		var realName=$("#realName").val(); //    
	    var re =/^[\u0391-\uFFE5\w]{1,20}$/;
		if (!re.test(realName)) {
			layer.msg('真实姓名:只允许汉字、英文字母、数字及下划线。20字以内');
			return null;
		}
		
		if ($.trim($("#nickName").val()).length < 1) {
			layer.msg('请输入昵称！');
			return null;
		}
		
		var nickName=$("#nickName").val(); //    
	    var re =/^[\u0391-\uFFE5\w]{1,20}$/;
		if (!re.test(nickName)) {
			layer.msg('昵称:只允许汉字、英文字母、数字及下划线。20字以内');
			return null;
		}

		if ($.trim($("#coverImg").val()).length < 1) {
			layer.msg('请上传头像！');
			return null;
		}
		var telephonetext=$.trim($("#telephone").val()); //    
       	var telephonere =/^1[012345789]\d{9}$/;
		if (!telephonere.test(telephonetext)) {
			layer.msg('手机号格式不正确！');
			return null;
		}
	   	var text=$.trim($("#email").val()); //    
       	var re =/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if (!re.test(text)) {
			layer.msg('邮箱格式不正确！');
			return null;
		}
		
		if($("#signature").val()!='' && $("#signature").val().length>500){
			layer.msg('个性签名：500字以内');
			return null;
		}
		if($("#description").val()!='' && $("#description").val().length>500){
			layer.msg('简介：500字以内');
			return null;
		}

		$.ajax({
			type : "post",
			url : "./userAddandUpdate.do",
			data : {
				"id" : $("#id").val(),
				"description" : $("#description").val(),
				"email" : $("#email").val(),
				"gender" : $("#gender").val(),
				"nickName" : $("#nickName").val(),
				"password" : $("#password").val(),
				"realName" : $("#realName").val(),
				"signature" : $("#signature").val(),
				"telephone" : $("#telephone").val(),
				"type" : $("#type").val(),
				"username" : $("#username").val(),
				"avatarImg" : $("#coverImg").val(),
			},
			dataType : "json",
			async : false,
			success : function(data) {
				if(data[0].result=='success'){
					layer.msg('提交成功');
					init();
					
				}else{
					layer.msg(data[0].msg);
				}
				
			},
			error : function(data) {
				alert("请求失败");
			}
		});
	}
	function init() {
		if($("#id").val() != null 
			&& $("#id").val() != ''
			&& $("#id").val() != 'null'
			&& $("#id").val() != 'undefined'
			&&$("#id").val() != undefined){
			$.getJSON('./userfindone.do', {
				id : $("#id").val()
				//向服务端传的参数，此处只是演示
				}, function(data) {
					$("#description").val(data[0].description);
					$("#email").val(data[0].email);
					$("#gender").val(data[0].gender);
					$("#nickName").val(data[0].nickName);
					$("#password").val("");
					$("#realName").val(data[0].realName);
					$("#signature").val(data[0].signature);
					$("#telephone").val(data[0].telephone);
					$("#type").val(data[0].type);
					$("#username").val(data[0].username);
					$("#coverImg").val(data[0].avatarImg);
					$("#cover").html("<a href="+data[0].avatarImg+" download='w3logo'><img src='"+data[0].avatarImg+"' width='30' height='30' /></a>");
				});
		}
	};
	
function onPanduan(name) {
	$.ajax({
		type : "post",
		url : "./UserPanDuan.do",
		data : {
			"username" : name
		},
		dataType : "json",
		async : false,
		success : function(data) {
			if (data[0].tishi == 0) {
				layer.msg("用户名已经存在");
				$("#username").val("");
			}
		}
	});
}

//上传图片
function upImages() {
	var myFiles = _editor.getDialog("insertimage");
  		myFiles.open();
}
 //上传文件
function upFiles() {
	var myFiles = _editor.getDialog("attachment");
   	myFiles.open();
}
</script>